﻿<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8" />
    <title></title>
    <link href="../../static_files/bootstrap-table/bootstrap.min.css" rel="stylesheet">
    <link href="../../static_files/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link type="text/css" href="../../static_files/stylesheet/font-awesome.min.css" rel="stylesheet">
    <link href="../../static_files/stylesheet/default.css" rel="stylesheet" />

    <link href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet">
    <script type="text/javascript" src="../../static_files/JavaScript/jquery.js"></script>
    <script src="../../static_files/bootstrap-table/bootstrap.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
    <script src="../../static_files/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="../../static_files/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
    <script type="text/javascript" src="../../static_files/JavaScript/build.js"></script>
</head>
<body>
    <div class="container">
        <!-- 按钮：用于打开模态框 -->
        <!-- 模态框 -->
    </div>
    <table id="list_table"></table>

    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content" style="">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">材料付款</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- 模态框主体 -->
                <div class="modal-body">
                    <div class="card">
                        <div class="card-header">
                            材料付款信息
                        </div>
                        <div class="card-body">
                            <div class="form-group row">
                                <label for="paymentId" class="col-sm-2 col-form-label text-center">付款编号：</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="paymentId">
                                </div>
                                <label for="paymentName" class="col-sm-2 col-form-label text-center">付款名称：</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="paymentName">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="program" class="col-sm-2 col-form-label text-center">所属项目：</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="program">
                                </div>
                                <label for="provider" class="col-sm-2 col-form-label text-center">供应商：</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="provider">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="bankName" class="col-sm-2 col-form-label text-center">开户行名称：</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="bankName">
                                </div>
                                <label for="account" class="col-sm-2 col-form-label text-center">银行账户：</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="account">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="compactor" class="col-sm-2 col-form-label text-center">经办人：</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="compactor">
                                </div>
                                <label for="Money" class="col-sm-2 col-form-label text-center">付款金额：</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="Money">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="date" class="col-sm-2 col-form-label text-center">日期：</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="date">
                                </div>
                                <label for="uppercase" class="col-sm-2 col-form-label text-center">金额（大写）：</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="uppercase">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="explain" class="col-sm-2 col-form-label text-center">付款说明：</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="explain">
                                </div>
                                <label for="leader" class="col-sm-2 col-form-label text-center">领导审批：</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="leader">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="remark" class="col-sm-2 col-form-label text-center">备注：</label>
                                <div class="col-sm-4">
                                    <textarea style='height: 39px;width:100%'></textarea>
                                </div>
                                <label for="customFile" class="col-sm-2 col-form-label text-center">附件：</label>
                                <div class="col-sm-4">
                                    <div class="custom-file"><input type="file" class="custom-file-input" id="customFile" name="filename"><label class="custom-file-label" for="customFile"><i class="fa fa-folder-open-o pull-left" style="font-size:24px"></i></label></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card" style="margin-top:8px;">
                    </div>
                </div>
                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary"><i class="fa fa-check-square-o addstyle_addpage_white"></i>&nbsp;提交</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        var jsondata =
            [
                {
                    "ID": "FK20180910001",
                    "Contract": "材料供应商付款第一次",
                    "Project": "农房",
                    "Provider": "喜洋洋工程材料有限公司",
                    "Signer": "张三",
                    "Date": "2018-09-11 11:13",
                    "MOney": "168,000.00",
                    "State": "完成",
                    "Remark": "",

                },
                {
                    "ID": "FK20180910002",
                    "Contract": "材料供应商付款第二次",
                    "Project": "农房",
                    "Provider": "喜洋洋工程材料有限公司",
                    "Signer": "张三",
                    "Date": "2018-09-11 11:23",
                    "MOney": "7,000.00",
                    "State": "完成",
                    "Remark": "",


                },

            ]
        var listdata =
            [
                {
                    "ID": 1

                }
            ]

        //初始化bootstrap-table的内容

        //记录页面bootstrap-table全局变量$table，方便应用
        $('#list_table').bootstrapTable({
            //url: queryUrl,                      //请求后台的URL（*）
            //method: 'GET',                      //请求方式（*）
            toolbar: '#toolbar',              //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: true,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
            /* pageSize: rows,         */            //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            search: true,                      //是否显示表格搜索
            strictSearch: true,
            showColumns: true,                  //是否显示所有的列（选择显示的列）
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
            showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                  //是否显示父子表
            //得到查询的参数
            queryParams: function (params) {
                //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
                var temp = {
                    rows: params.limit,                         //页面大小
                    page: (params.offset / params.limit) + 1,   //页码
                    sort: params.sort,      //排序列名
                    sortOrder: params.order //排位命令（desc，asc）
                };
                return temp;
            },
            columns: [{
                checkbox: true,
                visible: true                  //是否显示复选框
            }, {
                field: 'ID',
                title: '付款编号',
                sortable: true
            }, {
                field: 'Contract',
                title: '付款名称',
                sortable: true
            }, {
                field: 'Project',
                title: '所属项目',
                sortable: true
            }, {
                 field: 'Provider',
                 title: '供应商',
                 sortable: true
            },{
                field: 'Signer',
                title: '经办人',
                sortable: true
            }, {
                field: 'Date',
                title: '日期',
                sortable: true
            }, {
                field: 'Money',
                title: '付款金额',
                sortable: true
            }, {
                field: 'State',
                title: '审批状态',
                sortable: true
            }, {
                field: 'Remark',
                title: '备注',
                sortable: true
            }, {
                field: 'Operate',
                title: '操作',
                align: 'center',
                width: 140,
                //events:operateEvents,
                formatter: actionFormatter,
            },],
            data: jsondata,
            onLoadSuccess: function () {
                //alert('abc');
            },
            onPostHeader: function () {

            },
            onPostBody: function () {
                //alert('body');
            }
        });
        $('.columns-right').append('&nbsp;&nbsp;<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" style="width:100px"><i class="fa fa-plus-square addstyle_addpage_white"></i>&nbsp;添加</button >&nbsp;<button type="button" class="btn btn-primary" style="width:100px"><i class="fa fa-close addstyle_addpage_white"></i>&nbsp;删除</button >&nbsp;&nbsp;');
        //操作栏的格式化
        function actionFormatter(value, row, index) {
            return [
                '<button type="button" class="RoleOfdelete btn btn-primary btn-sm" style="margin-right:15px;"data-toggle="modal" data-target="#myModal" >详情</button>',
                '<button type="button" class="RoleOfedit btn btn-primary btn-sm" style="margin-right:15px;" data-toggle="modal" data-target="#myModal">修改</button>'
            ].join('');
        }
    </script>
</body>

</html>
